<template>
  <div class="left-menu">
    <a-tree
      v-model:expandedKeys="expandedKeys"
      v-model:selectedKeys="selectedKeys"
      v-model:checkedKeys="checkedKeys"
      :tree-data="treeData"
      @select="handleSelect"
      @expand="handleExpand"
    >
    </a-tree>
  </div>
</template>

<script setup>
defineOptions({ name: "LeftMenu" });
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const treeData = ref([]);
const expandedKeys = ref([]);
const selectedKeys = ref([]);
const checkedKeys = ref([]);
// watch(expandedKeys, () => {
//   console.log("expandedKeys", expandedKeys.value);
// });
// watch(selectedKeys, () => {
//   console.log("selectedKeys", selectedKeys.value);
// });
// watch(checkedKeys, () => {
//   console.log("checkedKeys", checkedKeys.value);
// });

const handleExpand = (keys) => {
  let keyString = JSON.stringify(keys);
  window.sessionStorage.setItem("expendedKeys", keyString);
};
const handleSelect = (keys, item) => {
  if (item.node.children) {
    return;
  } else {
    router.push(keys[0]);
  }
};
const setDefaultMenu = () => {
  selectedKeys.value = [route.path];
  // 不知道为什么 autoExpandParent 无效，只能手动控制了
  let keyString = window.sessionStorage.getItem("expendedKeys");
  let keys = JSON.parse(keyString);
  expandedKeys.value = keys;
};
const initMenu = () => {
  treeData.value = [
    {
      title: "组件管理",
      key: "compMgt",
      selectable: false,
      children: [
        {
          title: "模板管理",
          key: "/template/list",
        },
        {
          title: "组件管理",
          key: "/comp/list",
        },
      ],
    },
    {
      title: "系统设置",
      key: "systemConfig",
      selectable: false,
      children: [
        {
          title: "用户管理",
          key: "/user/list",
        },
        {
          title: "角色管理",
          key: "/role/list",
        },
      ],
    },
  ];
  setDefaultMenu();
};
onMounted(() => {
  initMenu();
});
</script>
